<template>
  <view style="width: 100%; display: flex">
    <GdInputItem
      style="width: calc(100% - 120px); margin-right: 24px"
      :meta-item="metaItem"
      :meta-item-list="metaItemList"
      :common-attr="commonAttr"
      :item-submit-config="itemSubmitConfig"
      :row-idx="rowIdx"
      :col-idx="colIdx"
      :row-data="rowData"
      :table-body-data="tableBodyData"
      :form-data="formData"
    ></GdInputItem>
    <image
      :src="captchaImgSrc"
      style="height: 36px; width: 96px; cursor: pointer"
      @click="onClickCaptcha"
    ></image>
  </view>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import GdInputItem from "../../gd-components/input/input.vue";
import { computed, watch, inject } from "vue";
import useComponentAttrs, { embeddedAtomicCompProps } from "../../useComponentAttrs";
import useComponentEvents from "../../useComponentEvents";
import {
  util_GetRowAttrVal,
  util_OptionChainHack,
  util_GetCurComponentAttrWithInheritedAttr,
} from "@gd-accbuild-ui/gd-ui/utils/index";

const props = defineProps({
  ...embeddedAtomicCompProps,
});

const { curBindVal, containerType } = useComponentAttrs({props});

const allBindEvents = useComponentEvents(props, curBindVal);

console.log(props.metaItem);
const captchaImgSrc = computed(() => {
  const src = props.metaItem?.componentAttr?.captchaConfig?.src ?? "";
  return src;
});
const onClickCaptcha = () => {
  const allCaptchaEvents =
    props.metaItem?.componentAttr?.captchaConfig?.events?.({
      rowIdx: props.rowIdx,
      colIdx: props.colIdx,
      metaKey: props.metaItem.key,
      metaItem: props.metaItem,
      metaItemList: props.metaItemList,
      rowData: props.rowData,
      formData: props.formData,
      tableBodyData: props.tableBodyData,
    }) ?? {};
  if (typeof allCaptchaEvents["clickCaptcha"] === "function") {
    allCaptchaEvents["clickCaptcha"]();
  }
};
</script>
<style lang="scss" scoped></style>
